<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.myChart);
    let data = [
      { value: 66, name: "美食" },
      { value: 67, name: "美食1" },
      { value: 68, name: "美食2" },
      { value: 69, name: "美食3" },
      { value: 90, name: "美食4" },
    ];
    let option = {
      title: {
        text: "饼状图",
        left: "center",
      },
      legend: {
        left: "left",
        // 图例布局朝向
        orient: "verical",
      },
      series: [{ name: "销量统计", type: "pie", data }],
    };
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid #333;
}
</style>